<template>
  <div class="coupon-wrp">
    <!--header start-->
    <header class="header-con header-w-bg">
      <router-link to='/membercenter'>
        <a>
          <i class='back-icon'></i>
        </a>
      </router-link>
      <h1 class="header-tit">优惠劵</h1>
      <div class="header-text"><a>添加优惠券</a></div>
    </header>
    <tab-ctl :tabctl="tabCtl" @tabChange="tabChange"></tab-ctl>
    <!--header end-->
    <!-- content start -->
    <div class="my-page myCoupon">
      <div class="coupon-list">
        <ul v-if="tabCtl[0].ispick">
          <li v-for="item in couponList.content.isNotValidList">
            <div class="coupon-list-left">
              <div class="l-con">
                <p><i>￥</i><span>{{ item.promoPrice }}</span></p>
                <p v-if="item.minOrderPriceRequired==0">无门槛</p>
                <p v-if="item.minOrderPriceRequired!=0">满{{ item.minOrderPriceRequired }}可用</p>
                <a class="gift-icon"></a>
              </div>
            </div>
            <div class="coupon-list-right">
              <div class="r-con">
                <p class="ticket-num">{{ item.promoCode }}</p>
                <p class="ticket-date">{{ item.promoValidateStart }}-{{ item.promoValidateEnd }}</p>
                <p class="ticket-apply">适用：{{ item.prodTypeApplied }}</p>
              </div>
            </div>
          </li>
        </ul>
        <ul v-if="tabCtl[1].ispick">
          <li v-for="item in couponList.content.isValidList" :class="[item.isValidReason == 1 ? 'coupon-used' : '',item.isValidReason == 2 ? 'coupon-expired' : '']">
            <div class="coupon-status">
              <img src="../../assets/image/membercenter/coupon-used.png" alt="" v-if="item.isValidReason == 1">
              <img src="../../assets/image/membercenter/coupon-expired.png" alt="" v-if="item.isValidReason == 2">
            </div>
            <div class="coupon-list-left">
              <div class="l-con">
                <p><i>￥</i><span>{{ item.promoPrice }}</span></p>
                <p v-if="item.minOrderPriceRequired==0">无门槛</p>
                <p v-if="item.minOrderPriceRequired!=0">满{{ item.minOrderPriceRequired }}可用</p>
              </div>
            </div>
            <div class="coupon-list-right">
              <div class="r-con">
                <p class="ticket-num">{{ item.promoCode }}</p>
                <p class="ticket-date">{{ item.promoValidateStart }}-{{ item.promoValidateEnd }}</p>
                <p class="ticket-apply">适用：{{ item.prodTypeApplied }}</p>
              </div>
            </div>
          </li>
        </ul>
        <div class="more-coupon bordbox" v-if="!((tabCtl[0].ispick&&couponList.content.isNotValidList.length==0)||(tabCtl[1].ispick&&couponList.content.isValidList.length==0))">更多好券，尽在领券中心<i></i></div>
      </div>
      <div v-cloak class="noCoupon" v-if="(tabCtl[0].ispick&&couponList.content.isNotValidList.length==0)||(tabCtl[1].ispick&&couponList.content.isValidList.length==0)">
        <div>
          <img src="../../assets/image/membercenter/noCoupon.png" alt="">
          <div class="submit-btn"><a href="" class="org-btn">马上去领券</a></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import TabCtl from '../../components/common/TabCtl'
  import axios from 'axios'
  import qs from 'qs'
  import common from '../../assets/js/common'
  import weui from 'weui.js'

  export default {
    data () {
      return {
        tabCtl: [
          {name: '未使用', func: 'tabChange', ispick: true},
          {name: '已使用/过期', func: 'tabChange', ispick: false}
        ],
        couponList: {
          'resultCode': '',
          'resultMsg': '',
          'content': {
            'isNotValidList': [],
            'isValidList': []
          },
          'accessToken': null
        }
      }
    },
    components: {
      TabCtl
    },
    created: function () {
      var self = this
      self.getCouponList()
    },
    methods: {
      tabChange: function (tab) {
        var self = this
        var thisIndex = parseInt(tab.currentTarget.getAttribute('data-index'))
        self.tabCtl.forEach(function (e, i) {
          if (i === thisIndex) {
            e.ispick = true
          } else {
            e.ispick = false
          }
        })
      },
      getCouponList: function () {
        var self = this
        var userId = common.userid
        var queryUrl = common.api.memberCenter.getCouponList
        var config = {
          headers: {
            'access-token': common.accesstoken,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        var data = qs.stringify({
          userId: userId
        })
        var loading = weui.loading('加载中')
        axios.post(queryUrl, data, config).then(function (res) {
          var couponlist = res.data
          var typelist
          couponlist.content.isNotValidList.forEach(function (e, i) {
            typelist = e.prodTypeApplied.split(',')
            typelist.forEach(function (m, n) {
              typelist[n] = common.productType[m].zh
            })
            typelist = typelist.join(',')
            couponlist.content.isNotValidList[i].prodTypeApplied = typelist
          })
          couponlist.content.isValidList.forEach(function (e, i) {
            typelist = e.prodTypeApplied.split(',')
            typelist.forEach(function (m, n) {
              typelist[n] = common.productType[m].zh
            })
            typelist = typelist.join(',')
            couponlist.content.isValidList[i].prodTypeApplied = typelist
          })
          self.couponList = res.data
          loading.hide()
        })
      }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/sass/member/coupon.scss";
</style>
